import "./VehicleInformationDetails.scss";
// import "../../static/font/iconfont.css";
import {
  Form,
  Input,
  Button,
  Select,
  Image,
  Modal,
  Table,
  Tag,
  Space,
} from "antd";
import store from "../../store/index";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import http from "../../utils/http";
import getLocalTime from "../../utils/getLocalTime";
const { Option } = Select;
const { confirm } = Modal;

const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const columns = [
  {
    title: "车牌号码",
    dataIndex: "cinfMark",
    key: "cinfMark",
  },
  {
    title: "车辆类型",
    dataIndex: "cinfClass",
    key: "cinfClass",
  },
  {
    title: "进出方向",
    dataIndex: "creaIoName",
    key: "creaIoName",
  },
  {
    title: "进出时间",
    key: "creaTime",
    dataIndex: "creaTime",
  },
];

const VehicleInformationDetails = ({ setState }) => {
  let [entryData, setData] = useState([]);

  useEffect(() => {
    http({
      url: "/car/findOneCar",
      method: "post",
      params: { cinfId: store.tangxiaoyun.car_id },
    }).then((res) => {
      console.log(res.data);
      let mid = res.data;

      setData(trans(mid.carRecordVoList));
      form.setFieldsValue({
        name: mid.ownerVo.ownerName,
        tel: mid.ownerVo.ownerPhone,
        sex: mid.ownerVo.ownerSex,
        danwei: "",
        lou: "",
        room: "",
        face: mid.ownerVo.ownerFace,
      });
      form1.setFieldsValue({
        carType: trans1(mid.cinfClass),
        carBrand: mid.cinfBrand,
        startTime: getLocalTime(mid.cinfStart),
      });
      form2.setFieldsValue({
        carNum: mid.cinfMark,
        carModel: mid.cinfType,
        endTime: getLocalTime(mid.cinfEnd),
      });
    });
  }, []);
  //返回页面
  const backCar = () => {
    setState(1);
  };
  const quxiao = () => {
    confirm({
      icon: <ExclamationCircleOutlined />,
      content: "您确定离开此页面吗？",
      cancelText: "取消",
      okText: "确定",
      onOk() {
        console.log("OK");
        backCar();
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };
  const [form] = Form.useForm();
  const [form2] = Form.useForm();
  const [form1] = Form.useForm();
  const onFinish = (values) => {
    console.log(values);
  };
  // 转换函数
  function trans(v) {
    for (let i = 0; i < v.length; i++) {
      v[i].creaTime = getLocalTime(v[i].creaTime);

      if (v[i].cinfClass == 0) {
        v[i].cinfClass = "临时车";
      } else if (v[i].cinfClass == 1) {
        v[i].cinfClass = "包月车";
      } else {
        v[i].cinfClass = "园区车";
      }
    }
    return v;
  }
  function trans1(v) {
    console.log(v);
    if (v == 0) {
      v = "临时车";
    } else if (v == 1) {
      v = "包月车";
    } else {
      v = "园区车";
    }
  }

  return (
    <div className="add">
      <div>
        <div className="tit">
          <div>
            <div>
              <div></div>
              <div>车辆信息详情</div>
            </div>
          </div>
          <div>
            <span className="iconfont icon-a-16guanbi" onClick={quxiao}></span>
          </div>
        </div>
        <hr></hr>
        <div className="content">
          <div>
            <div>
              <p>车主基本信息:</p>
              <Form
                {...layout}
                form={form}
                name="control-hooks"
                onFinish={onFinish}
              >
                <Form.Item
                  name="name"
                  label="车主姓名"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input disabled />
                </Form.Item>
                <Form.Item
                  name="tel"
                  label="联系方式"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input disabled />
                </Form.Item>
                <Form.Item
                  name="sex"
                  label="人员性别"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Select placeholder="" allowClear disabled></Select>
                </Form.Item>
                <Form.Item
                  name="danwei"
                  label="单位名称"
                  rules={[
                    {
                      required: false,
                    },
                  ]}
                >
                  <Input disabled />
                </Form.Item>
                <Form.Item
                  name="lou"
                  label="所属楼宇"
                  rules={[
                    {
                      required: false,
                    },
                  ]}
                >
                  <Select placeholder="" allowClear disabled></Select>
                </Form.Item>
                <Form.Item
                  name="room"
                  label="房间名称"
                  rules={[
                    {
                      required: false,
                    },
                  ]}
                >
                  <Input disabled />
                </Form.Item>
                <Form.Item
                  name="face"
                  label="人脸照片"
                  rules={[
                    {
                      required: false,
                    },
                  ]}
                >
                  <Image
                    width={100}
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                  />
                </Form.Item>
              </Form>
            </div>
          </div>
          <div>
            <div>
              <p>车辆基本信息:</p>
              <div className="right">
                <div>
                  <Form
                    {...layout}
                    form={form1}
                    name="control-hooks"
                    onFinish={onFinish}
                  >
                    <Form.Item
                      name="carType"
                      label="车辆类型"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Select disabled allowClear defaultValue="临时车">
                        <Option value="0">临时车</Option>
                        <Option value="1">包月车</Option>
                        <Option value="2">园区车</Option>
                      </Select>
                    </Form.Item>
                    <Form.Item
                      name="carBrand"
                      label="车辆品牌"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input disabled />
                    </Form.Item>
                    <Form.Item
                      name="startTime"
                      label="开始时间"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input disabled />
                    </Form.Item>
                  </Form>
                </div>
                <div>
                  <Form
                    {...layout}
                    form={form2}
                    name="control-hooks"
                    onFinish={onFinish}
                  >
                    <Form.Item
                      name="carNum"
                      label="车辆号码"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input disabled />
                    </Form.Item>
                    <Form.Item
                      name="carModel"
                      label="车辆型号"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input disabled />
                    </Form.Item>
                    <Form.Item
                      name="endTime"
                      label="结束时间"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input disabled />
                    </Form.Item>
                  </Form>
                </div>
              </div>
              <div className="right1">
                <p>车辆进/出场记录:</p>
                <Table
                  dataSource={entryData}
                  columns={columns}
                  bordered="true"
                  pagination={false}
                  size="small"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default observer(VehicleInformationDetails);
